"use client";
import { useEffect, useRef, useState } from "react";
import { fmtDateTime } from "@/lib/format";

type Ev = {
  seq: number;
  at: string;
  level: string;
  kind: string;
  stage?: string | null;
  message: string;
  data?: unknown;
};

export function LiveTimeline({ runId, initial, active }: { runId: string; initial: Ev[]; active: boolean }) {
  const [events, setEvents] = useState<Ev[]>(initial);
  const [state, setState] = useState<"idle" | "live" | "reconnecting" | "closed">(
    active ? "reconnecting" : "closed",
  );
  const lastSeq = useRef(initial.at(-1)?.seq ?? 0);
  const bottom = useRef<HTMLDivElement>(null);
  const [follow, setFollow] = useState(true);
  useEffect(() => {
    if (!active) return;
    let es: EventSource | null = null;
    let stopped = false;
    let retry = 1000;
    const connect = () => {
      if (stopped) return;
      es = new EventSource(`/api/admin/runs/${runId}/events?stream=1&after=${lastSeq.current}`);
      es.addEventListener("hello", () => {
        setState("live");
        retry = 1000;
      });
      es.addEventListener("run.event", (m) => {
        const ev = JSON.parse((m as MessageEvent).data) as Ev;
        if (ev.seq <= lastSeq.current) return;
        lastSeq.current = ev.seq;
        setEvents((x) => [...x, ev]);
        if (ev.kind === "status.transition" && /→ (published|failed|cancelled)/.test(ev.message)) {
          stopped = true;
          es?.close();
          setState("closed");
          setTimeout(() => window.location.reload(), 1500);
        }
      });
      es.onerror = () => {
        es?.close();
        setState("reconnecting");
        if (!stopped) {
          retry = Math.min(retry * 2, 15000);
          setTimeout(connect, retry);
        }
      };
    };
    connect();
    return () => {
      stopped = true;
      es?.close();
    };
  }, [runId, active]);
  useEffect(() => {
    if (follow) bottom.current?.scrollIntoView({ block: "nearest" });
  }, [follow]);
  return (
    <div className="surface mt-2">
      <div className="flex items-center justify-between border-b px-3 py-2 text-xs hairline">
        <span aria-live="polite">
          {state === "live" ? (
            <span style={{ color: "var(--color-ok-500)" }}>● live</span>
          ) : state === "reconnecting" ? (
            <span style={{ color: "var(--color-warn-500)" }}>● reconnecting…</span>
          ) : (
            <span className="subtle">● stream closed</span>
          )}{" "}
          · {events.length} events · cursor {lastSeq.current}
        </span>
        <label className="flex items-center gap-1">
          <input type="checkbox" checked={follow} onChange={(e) => setFollow(e.target.checked)} /> follow
        </label>
      </div>
      <ol
        className="max-h-[32rem] overflow-auto p-2 font-mono text-xs leading-relaxed"
        aria-label="Run events"
      >
        {events.length === 0 && <li className="muted p-2">No events yet.</li>}
        {events.map((e) => (
          <li
            key={e.seq}
            className="grid grid-cols-[3rem_9rem_7rem_1fr] gap-2 border-b py-1 hairline"
            style={{
              color:
                e.level === "error"
                  ? "var(--color-danger-500)"
                  : e.level === "warn"
                    ? "var(--color-warn-500)"
                    : undefined,
            }}
          >
            <span className="subtle">{e.seq}</span>
            <span className="subtle">{fmtDateTime(e.at)}</span>
            <span className="subtle truncate">{e.stage ?? ""}</span>
            <span>
              <span className="font-semibold">{e.kind}</span> {e.message}
              {e.data && Object.keys(e.data as object).length > 0 ? (
                <details className="inline">
                  <summary className="inline cursor-pointer subtle"> ⋯</summary>
                  <pre className="whitespace-pre-wrap">{JSON.stringify(e.data, null, 1)}</pre>
                </details>
              ) : null}
            </span>
          </li>
        ))}
        <div ref={bottom} />
      </ol>
    </div>
  );
}